import React, { useState, useEffect, useCallback, ReactElement } from "react";
import { Radio, InputNumber, Select } from "antd";
import { radioStyle, setOptions } from "../common";
import "../common.less";
const RadioGroup = Radio.Group;
const options = setOptions(new Date().getFullYear() + 10, new Date().getFullYear())

interface Props {
    value: string
    onChange: (e: string) => void
}

export default function YearPane(props: Props): ReactElement {
    // 初始年
    const startY = new Date().getFullYear();
    // 结束年
    const endY = new Date().getFullYear() + 10;

    const { value, onChange } = props;
    const [currentRadio, setCurrentRadio] = useState(1);
    const [from, setFrom] = useState(startY);
    const [to, setTo] = useState(endY);
    const [offsetFrom, setOffsetFrom] = useState(startY);
    const [offset, setOffset] = useState(1);
    const [selected, setSelected] = useState<number[]>([startY]);
    let isFirstRender = false
    useEffect(() => { isFirstRender = true }, [])


    useEffect(() => {
        if (value === "*") {
            setCurrentRadio(1);
        } else if (value === "?") {
            setCurrentRadio(2);
        } else if (value.indexOf("-") > -1) {
            setCurrentRadio(3);
            const [defaultFrom, defaultTo] = value.split("-");
            setFrom(parseInt(defaultFrom, 10));
            setTo(parseInt(defaultTo, 10));
        } else if (value.indexOf("/") > -1) {
            setCurrentRadio(4);
            const [defaultOffsetFrom, defaultOffset] = value.split("/");
            setOffsetFrom(parseInt(defaultOffsetFrom, 10));
            setOffset(parseInt(defaultOffset, 10));
        } else {
            setCurrentRadio(5);
            setSelected(value ? value.split(",").map(Number) : [startY]);
        }
    }, [value]);

    useEffect(() => {
        if (!isFirstRender) {
            switch (currentRadio) {
                case 1:
                    onChange("*");
                    break;
                case 2:
                    onChange("?");
                    break;
                case 3:
                    onChange(`${from}-${to}`);
                    break;
                case 4:
                    onChange(`${offsetFrom}/${offset}`);
                    break;
                case 5:
                    onChange(selected.join(","));
                    break;
                default:
                    break;
            }
        }
    }, [currentRadio, from, to, offsetFrom, offset, selected]);

    const onChangeRadio = useCallback((e: any) => {
        setCurrentRadio(e.target.value);
    }, []);

    const onChangeFrom = useCallback((v: any) => {
        setFrom(v || startY);
    }, []);

    const onChangeTo = useCallback((v: any) => {
        setTo(v || endY);
    }, []);

    const onChangeOffsetFrom = useCallback((v: any) => {
        setOffsetFrom(v || startY);
    }, []);

    const onChangeOffset = useCallback((v: any) => {
        setOffset(v || 1);
    }, []);

    const onChangeSelected = useCallback((v: []) => {
        v = v.sort((a, b) => a - b)
        setSelected(v.length !== 0 ? v : [startY]);
    }, []);

    const aTobA = <InputNumber disabled={currentRadio !== 3} min={startY} max={endY} value={from} size="small" onChange={onChangeFrom} style={{ width: 100 }} />;

    const aTobB = <InputNumber disabled={currentRadio !== 3} min={startY} max={endY} value={to} size="small" onChange={onChangeTo} style={{ width: 100 }} />;

    const aStartTobA = <InputNumber disabled={currentRadio !== 4} min={startY} max={endY} value={offsetFrom} size="small" onChange={onChangeOffsetFrom} style={{ width: 100 }} />;
    const aStartTobB = <InputNumber disabled={currentRadio !== 4} min={1} max={10} value={offset} size="small" onChange={onChangeOffset} style={{ width: 100 }} />;

    return (
        <RadioGroup name="radiogroup" value={currentRadio} onChange={onChangeRadio}>
            <Radio style={radioStyle} value={1}>
                每年
            </Radio>

            <Radio style={radioStyle} value={3}>
                从&nbsp;{aTobA}&nbsp;-&nbsp;{aTobB} &nbsp;年，每年执行一次
            </Radio>

            <Radio style={radioStyle} value={4}>
                从&nbsp;{aStartTobA}&nbsp;年开始， 每&nbsp;{aStartTobB}&nbsp;年执行一次
            </Radio>

            <div className="box_flex">
                <Radio style={radioStyle} value={5}>
                    具体年份
                </Radio>
                <Select
                    allowClear
                    showSearch={false}
                    size="small"
                    disabled={currentRadio != 5}
                    mode={"multiple"}
                    maxTagCount={"responsive"}
                    options={options}
                    placeholder={"请选择具体年份"}
                    style={{ width: "200px" }}
                    onChange={(e) => onChangeSelected(e)}
                >
                </Select>
            </div>

            <Radio style={radioStyle} value={2}>
                不指定
            </Radio>
        </RadioGroup>
    );
}